<template>
  <div>
    <el-form ref="form" :model="form" label-width="70px">
      <el-form-item label="电影名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="导演">
        <el-input v-model="form.director"></el-input>
      </el-form-item>
      <el-form-item label="分类">
        <el-input v-model="form.category"></el-input>
      </el-form-item>
      <el-form-item label="简介">
        <el-input type="textarea" rows="2" v-model="form.synopsis"></el-input>
      </el-form-item>
      <el-form-item label="产地">
        <el-input v-model="form.nation"></el-input>
      </el-form-item>
      <el-form-item label="语言">
        <el-input v-model="form.language"></el-input>
      </el-form-item>
      <el-form-item label="时长">
        <el-input v-model="form.runtime"></el-input>
      </el-form-item>

      <el-form-item label="剧照">
        <el-upload
          class="upload-demo"
          action="http://132.232.87.95:3000/admin/film/upload"
          :on-remove="handleChange"
          :on-success="getphotos"
          :file-list="photos"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip"></div>
        </el-upload>
      </el-form-item>

      <el-form-item label="演员名字">
        <el-input class="lang" v-model="qname"></el-input>
      </el-form-item>
      <el-form-item label="角色">
        <el-input class="lang" v-model="qrole"></el-input>
      </el-form-item>

      <el-form-item label="演员大头像">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts"
          :on-remove="handleRemove"
          :on-success="change"
          :file-list="actors"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip"></div>
        </el-upload>
      </el-form-item>

      <el-form-item label="海报">
        <el-input v-model="form.poster">
          <template slot-scope="scope">
            <div>
              <img :src="scope.row.poster" alt height="70px" width="70px">
            </div>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="评分">
        <el-input v-model="form.grade"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-radio v-model="form.filmType" label="2D">2D</el-radio>
        <el-radio v-model="form.filmType" label="3D">3D</el-radio>
      </el-form-item>
      <el-form-item label="首映">
        <el-date-picker v-model="form.premiereAt" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="预售">
        <el-switch v-model="form.isPresale" :active-text="form.isPresale?'预售中':'未开卖'"></el-switch>
      </el-form-item>

      <slot></slot>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ["form"],

  data() {
    return {
      actors: [],
      photos: [],
      qname: "",
      qrole: ""
    };
  },

  // computed: {
  //   photos: {
  //     get() {
  //       return this.form.photos;
  //     },
  //     set() {
  //       this.$emit("photo", this.photos);
  //     }
  //   }
  // },
  methods: {
    handleChange(file, photos) {
      // this.photos.push({
      //   name: file.name,
      //   url: file.url
      // });
    },
    getactors() {},
    handleRemove() {},
    //剧照上传方法
    getphotos(file, photos) {
      console.log(this.form.photos);
      this.form.photos.push({
        name: file.image.name,
        url: file.image.url
      });
      // this.$emit("photo", this.photos);
      console.log("this.form", this.form.photos);
      // console.log('file',file,'this.photos', this.photos, 'photos',photos);
    },

    change(file, actors) {
      console.log(actors, this.form.actors);
      this.form.actors.push({
        role: this.qrole,
        url: actors.url,
        name: this.qname
      });
    }
  }
};
// this.$emit("photos",this.photos)

// }
</script>
<style>
.lang {
  width: 400px;
}
</style>
